import React, { useEffect, useState } from 'react';
import './index.less';
import { LeftOutline } from 'antd-mobile-icons';
import { Tabs } from 'antd-mobile';
import { history } from 'umi';
import axios from 'axios';

export default function Orders() {
  const [activeIndex, setActiveIndex] = useState<string>('all');
  const [orderlist, setorderlist] = useState<any[]>([]);

  const getOrderlist = () => {
    let userdata1 = sessionStorage.getItem('userdata') || JSON.stringify({});
    axios
      .get(
        '/api/shopping/orderlist?user_id=' +
          JSON.parse(userdata1)._id +
          '&flag=' +
          activeIndex,
      )
      .then((values) => {
        let data = values.data;
        console.log(data);

        setorderlist([...data]);
      });
  };

  const goMine = () => {
    history.push('/hello/mine');
  };

  const goDetails = (item: any) => {
    history.push('/details', { orderinfo: item });
  };

  useEffect(() => {
    getOrderlist();
  }, []);

  return (
    <div className="order">
      <div className="o-header">
        <div className="o-head-top">
          <div className="o-back" onClick={goMine}>
            <LeftOutline fontSize={16} />
          </div>
          <div className="o-title">我的订单</div>
        </div>
        <div className="o-tab">
          <Tabs
            activeKey={activeIndex}
            style={{
              '--title-font-size': '14px',
            }}
            onChange={(val) => {
              setActiveIndex(val);
            }}
          >
            <Tabs.Tab title="全部" key="all" />
            <Tabs.Tab title="待付款" key="nopay" />
            <Tabs.Tab title="待发货" key="nosend" />
            <Tabs.Tab title="已发货" key="send" />
            <Tabs.Tab title="已完成" key="finished" />
          </Tabs>
        </div>
      </div>
      <div className="o-list">
        {orderlist.map((item) => {
          return (
            <div key={item._id} className="ordering">
              <div className="o-first">
                <div className="o-first-title">{item.classname}精选</div>
                {item.orderstatus === 0 ? (
                  <div className="o-first-tag">待付款</div>
                ) : (
                  <></>
                )}
                {item.orderstatus === 1 ? (
                  <div className="o-first-tag">待发货</div>
                ) : (
                  <></>
                )}
                {item.orderstatus === 2 ? (
                  <div className="o-first-tag">待收货</div>
                ) : (
                  <></>
                )}
                {item.orderstatus === 3 ? (
                  <div className="o-first-tag">交易完成</div>
                ) : (
                  <></>
                )}
                {item.orderstatus === 4 ? (
                  <div className="o-first-tag">交易关闭</div>
                ) : (
                  <></>
                )}
              </div>
              <div className="o-second" onClick={() => goDetails(item)}>
                <div className="o-second-left">
                  <img src="/api/upload/banner5.jpg" alt="" />
                  <div className="o-second-left-right">
                    <div className="goodname">{item.name}</div>
                    <div className="goodtag">{item.tag}</div>
                  </div>
                </div>
                <div className="o-second-right">
                  <div className="truepay">{item.price.toFixed(2)}</div>
                  <div className="totalnum">共{item.num}件</div>
                </div>
              </div>
              <div className="o-third">
                <div className="o-third-left">
                  <span>总价</span>
                  <span className="totalpay">{item.price.toFixed(2)}</span>
                </div>
                <div className="o-third-middle">
                  <span>优惠</span>
                  <span className="youhui">
                    {item.youhuiprice > 0
                      ? item.youhuiprice.toFixed(2)
                      : '0.00'}
                  </span>
                </div>
                <div className="o-third-right">
                  <span>实际付款</span>
                  <span className="truepay">{item.totalprice.toFixed(2)}</span>
                </div>
              </div>
              {item.orderstatus === 0 ? (
                <div className="o-foured">
                  <div className="basestyle1">删除订单</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle1">取消订单</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle2">去支付</div>
                </div>
              ) : (
                <></>
              )}
              {item.orderstatus === 1 ? (
                <div className="o-foured">
                  <div className="basestyle1">删除订单</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle1">申请退款</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle1">再次购买</div>
                </div>
              ) : (
                <></>
              )}
              {item.orderstatus === 2 ? (
                <div className="o-foured">
                  <div className="basestyle1">申请退款</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle1">查看物流</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle2">确认收货</div>
                </div>
              ) : (
                <></>
              )}
              {item.orderstatus === 3 ? (
                <div className="o-foured">
                  <div className="basestyle1">申请退款</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle1">查看物流</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle2">评价</div>
                </div>
              ) : (
                <></>
              )}
              {item.orderstatus === 4 ? (
                <div className="o-foured">
                  <div className="basestyle1">删除订单</div>
                  <div style={{ width: '10px' }}></div>
                  <div className="basestyle1">再次购买</div>
                </div>
              ) : (
                <></>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
